feat(cc-search-bar): init component by clara-layus-cc · Pull Request #1733 · CleverCloud/clever-components

clara-layus-cc · 2026-04-27T13:41:45Z

What does this PR do?

Creating a new search bar component

How to review?

Check the commit,
Check the preview

github-actions · 2026-04-28T14:33:26Z

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/feat/search-bar/index.html.

This preview will be deleted once this PR is closed.

pdesoyres-cc

Nice work @clara-layus-cc

Galimede

Hey Clara, overall mostly nitpicks and thoughts but LGTM, GG! 👏

florian-sanders-cc

Good job @clara-layus-cc the component looks nice!

I have a few questions:

will there be async loading involved? The console will need the list of all the resources, it already has it in it's summary so I assumed you're going to rely on this? (this would mean no loading I think so it would be fine)
why not using the cc-dialog component here? Do you plan to use it from the console directly?
I think we could use the cc-dialog and let it handle the main heading + close button. Since the wireframes seem to have a smaller padding than the default dialog, we could use the padding custom props to customize these and match the wireframes while still using the cc-dialog component. We can discuss all of that in sync if needed 😉
the margin / gap between the section label and the border above it does not match the wireframes (margin after each section is fine, but margin before each section is too narrow)

HeleneAmouzou

GG Clara ! I only left question/suggestion. ~~I was also wondering if we should add some tests ? I would be curious to have other opinions on this.~~

marion-izd · 2026-05-05T15:23:57Z

Well done, Clara!
I think I’ve addressed the previous comments and questions, so here are my own comments and questions:

As Hélène pointed out, the title is a bit small; we should base it either on the title of the cc-dialog or on the title of a cc-block. For my part, I’ve based it on the title of a cc-block, so 18px
The headings for the results categories: these should be clearer/smaller to distinguish them from the results themselves (in the mock-up, they are 12px in light grey, whilst the results are 14px in the default colour)
The icons in the categories need to be made slightly larger (your component is 12px > mock-up is 16px)
Same for icons for external link (your component is 9px > mock-up is 16px)
As mentioned earlier, the colour of the badges in the dimmed version
I have a few comments about the hover/focus effect: In terms of alignment, when the mouse hovers over or focuses on it, it should be aligned with the category icon (There is currently a slight spacing). And the corner radius is small in hover (your component is 2px > mock-up il 8px) and 10px for focus.

I don't think I've left anything out. 💪 Good work, and please don't hesitate to ask me or drop me a line if you have any further questions.

HeleneAmouzou

All good for me !

roberttran-cc

LGTM, nice component! No additional comments beyond those already raised.

marion-izd · 2026-05-18T13:19:07Z

I’ve just had another look, particularly at the text in the two versions —‘empty’ and ‘no result’— and I agree with your suggestions.

Just a quick note on the ‘no result’ version: you could remove the full stop at the end (something David would probably point out 😉).
I have a question about the ‘empty’ section. I like the examples, but what about ‘is:app’? Will that be replaced automatically? Does it also work with keywords to find apps?

Great work again 💪

florian-sanders-cc

A few a11y issues but almost there 👍

florian-sanders-cc

All good for me, great job @clara-layus-cc 😎

roberttran-cc

Only a minor doc-related feedback for me, LGTM otherwise, hence the approval.

hsablonniere

Well done @clara-layus-cc, I added a small comment, feel free to apply it or not and here are some changes I want :

The main bloc should be aligned to the top to prevent the input to move while typing.
The hover with the ">" shifts the content, I think we need to prevent this.

Notes :

I was wondering if I needed a clear() method but assigning value="" is enough.

florian-sanders-cc

A small change to make but apart from that it's good to me!

pdesoyres-cc

LGTM. Well done Clara

florian-sanders-cc

All good!

Move the URL-origin check out of cc-link as a private method into a shared utility, so other components (cc-search-bar) can reuse it.

github-actions · 2026-06-02T14:37:39Z

🔎 The preview has been automatically deleted.

clara-layus-cc requested review from Galimede, HeleneAmouzou, florian-sanders-cc, pdesoyres-cc and roberttran-cc April 27, 2026 13:41

clara-layus-cc self-assigned this Apr 27, 2026

clara-layus-cc marked this pull request as draft April 28, 2026 12:37

clara-layus-cc force-pushed the feat/search-bar branch 3 times, most recently from 08e1189 to 8d3aa7b Compare April 28, 2026 14:25

clara-layus-cc marked this pull request as ready for review April 28, 2026 14:32

pdesoyres-cc requested changes Apr 29, 2026

View reviewed changes

Comment thread src/components/cc-search-bar/cc-search-bar.events.js Outdated

Comment thread src/components/cc-search-bar/cc-search-bar.js Outdated

clara-layus-cc force-pushed the feat/search-bar branch 2 times, most recently from cc15826 to 3331f00 Compare April 29, 2026 12:46

clara-layus-cc requested a review from pdesoyres-cc April 29, 2026 12:53

Galimede requested changes May 4, 2026

View reviewed changes

florian-sanders-cc requested changes May 4, 2026

View reviewed changes

florian-sanders-cc reviewed May 4, 2026

View reviewed changes

Comment thread src/components/cc-search-bar/cc-search-bar.js Outdated

HeleneAmouzou requested changes May 4, 2026

View reviewed changes

Comment thread src/components/cc-search-bar/cc-search-bar.stories.js

Comment thread src/components/cc-search-bar/cc-search-bar.js Outdated

clara-layus-cc marked this pull request as draft May 6, 2026 13:43

clara-layus-cc force-pushed the feat/search-bar branch from 3331f00 to 7443c04 Compare May 6, 2026 15:39

clara-layus-cc marked this pull request as ready for review May 7, 2026 07:46

clara-layus-cc requested review from Galimede, HeleneAmouzou, florian-sanders-cc and marion-izd May 7, 2026 09:37

HeleneAmouzou approved these changes May 11, 2026

View reviewed changes

roberttran-cc approved these changes May 13, 2026

View reviewed changes

clara-layus-cc force-pushed the feat/search-bar branch from aa612ce to ec92588 Compare May 15, 2026 14:39

clara-layus-cc requested review from HeleneAmouzou and roberttran-cc May 15, 2026 14:48

clara-layus-cc force-pushed the feat/search-bar branch from ec92588 to 23dc518 Compare May 19, 2026 14:32

florian-sanders-cc requested changes May 19, 2026

View reviewed changes

Comment thread src/components/cc-search-bar/cc-search-bar.js Outdated

Comment thread src/components/cc-search-bar/cc-search-bar.js Outdated

Comment thread src/components/cc-search-bar/cc-search-bar.js

clara-layus-cc force-pushed the feat/search-bar branch from 23dc518 to 734cc02 Compare May 19, 2026 15:49

clara-layus-cc requested a review from florian-sanders-cc May 19, 2026 16:15

florian-sanders-cc approved these changes May 20, 2026

View reviewed changes

roberttran-cc approved these changes May 25, 2026

View reviewed changes

Comment thread src/components/cc-search-bar/cc-search-bar.js

clara-layus-cc force-pushed the feat/search-bar branch from 734cc02 to 6b06ed0 Compare May 26, 2026 13:48

hsablonniere requested changes May 27, 2026

View reviewed changes

Comment thread src/components/cc-search-bar/cc-search-bar.js Outdated

clara-layus-cc force-pushed the feat/search-bar branch 2 times, most recently from 322d19d to ee847bb Compare May 29, 2026 13:54

florian-sanders-cc requested changes Jun 2, 2026

View reviewed changes

Comment thread src/components/cc-search-bar/cc-search-bar.js Outdated

pdesoyres-cc approved these changes Jun 2, 2026

View reviewed changes

clara-layus-cc force-pushed the feat/search-bar branch 2 times, most recently from 5d8ba18 to 709a1ee Compare June 2, 2026 14:16

florian-sanders-cc approved these changes Jun 2, 2026

View reviewed changes

clara-layus-cc added 2 commits June 2, 2026 16:29

refactor(utils): extract isExternalUrl helper from cc-link

c955959

Move the URL-origin check out of cc-link as a private method into a shared utility, so other components (cc-search-bar) can reuse it.

feat(cc-search-bar): init component

025bfda

clara-layus-cc force-pushed the feat/search-bar branch from 709a1ee to 025bfda Compare June 2, 2026 14:29

clara-layus-cc merged commit fd6b463 into master Jun 2, 2026
7 checks passed

clara-layus-cc deleted the feat/search-bar branch June 2, 2026 14:36

Conversation

clara-layus-cc commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

How to review?

Uh oh!

github-actions Bot commented Apr 28, 2026

Uh oh!

pdesoyres-cc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Galimede left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

florian-sanders-cc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

HeleneAmouzou left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

marion-izd commented May 5, 2026

Uh oh!

HeleneAmouzou left a comment

Choose a reason for hiding this comment

Uh oh!

roberttran-cc left a comment

Choose a reason for hiding this comment

Uh oh!

marion-izd commented May 18, 2026

Uh oh!

florian-sanders-cc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

florian-sanders-cc left a comment

Choose a reason for hiding this comment

Uh oh!

roberttran-cc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

hsablonniere left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

florian-sanders-cc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pdesoyres-cc left a comment

Choose a reason for hiding this comment

Uh oh!

florian-sanders-cc left a comment

Choose a reason for hiding this comment

Uh oh!

clara-layus-cc commented Apr 27, 2026 •

edited

Loading

florian-sanders-cc left a comment •

edited

Loading

HeleneAmouzou left a comment •

edited

Loading